<template>
    <transition name="el-alert-fade">
        <button
            :class="'ku-button--' + type"
            :style="{
                width: w + 'px',
                height: h + 'px',
                border,
                borderRadius: round ? (h / 2 + 'px') : 0,
                cursor: 'pointer',
                color,
            }"
            @click="handleClick"
        >
            <slot></slot>
        </button>
    </transition>
</template>

<script>
    export default {
        name: "KuButton",

        props: {
            // 宽度
            w: {
                type: Number,
                default: 180
            },

            // 高度
            h: {
                type: Number,
                default: 40
            },

            // 圆角
            round: {
                type: Boolean,
                default: false
            },

            // 边框
            border: {
                type: String,
                default: "none"
            },

            // 字体颜色
            color: {
                type: String,
                default: "#ffffff"
            },

            // 背景色
            bg: {
                type: String,
                default: ""
            },

            // 主题类型
            type: {
                type: String,
                default: "primary"
            },
        },

        data() {
            return {}
        },

        methods: {
            // 绑定点击事件
            handleClick() {
                this.$emit("click")
            },
        },
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/style/variable.module.scss";

    // 系统主色调
    .ku-button--system {
        color: $mainColor;
        background-color: $mainBgColor;
    }
</style>
